<template>
    <a-config-provider :locale="locale">
        <div>
            <custom-my-header />
            <div class="app-content">
                <div class="sider-bar" :class="!collapsed?'w-190':'w-80'">
                    <custom-menu-list></custom-menu-list>
                </div>
                <div class="main-content">
                    <nuxt keep-alive :keep-alive-props='{include: includeArr}' />
                </div>
            </div>
        </div>
    </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
    name: 'LayoutDefault',
    provide () {
        return {
            layout: this
        }
    },
    data () {
        return {
            includeArr: ['NeedManageInvestmentPromotionList', 'NeedManageServiceList', 'NeedManageTownServiceList', 'NeedManageService', 'ServiceManage', 'SuccessCase'],
            collapsed: false,
            locale: zhCN,
            moment,
            zhCN
        }
    },
    created () {
        moment.locale('zh-cn')
    },
    mounted () {
        this.$store.dispatch('user/initStore')
    }
}
</script>

<style lang="less" scoped>
html {
    font-family: primary-font-family;
    font-size: 16px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

#__nuxt {
    height: 100%;

    #__layout {
        height: 100%;

        & > div {
            height: 100%;
        }
    }
}

.app-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 60px);
    overflow: hidden;
    .sider-bar {
        height: 100%;
        background: #fff;
    }
    .main-content {
        flex: 1;
        height: 100%;
        overflow-y: hidden;
        overflow-x: auto;
    }
  .w-190{
    width: 190px!important;
  }
  .w-80{
    width: 80px!important;
  }
}
</style>
